<template>
  <el-dialog
    ref="elDialog"
    :append-to-body="true"
    :visible.sync="dialog"
    title="主机列表"
    width="500px"
    top="5vh"
    class="theme1"
    :close-on-click-modal="false"
    @open="openHandle"
    @close="closeHandle"
  >
    <slot>
      <el-card ref="elCard" class="theme2">
        <div slot="header" class="clearfix" style="padding: 0px 0px;">
          <el-button style="float: right; padding: 3px 0" type="text">
            <el-input
              ref="searchInput"
              style="height:30px"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              @change="searchChange"
            />
          </el-button>
        </div>
        <div>
          <el-table v-loading="loading" :data="alarmData" size="small" highlight-current-row style="width: 100%;" stripe>
            <el-table-column :show-overflow-tooltip="true" prop="hostname" label="主机名" />
            <el-table-column :show-overflow-tooltip="true" prop="ip" label="ip" />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <div v-for="item in statusList" :key="item.id">
                  <el-tag v-if="scope.row.status === item.id" :type="item.type">{{ item.value }}</el-tag>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </slot>
    <span slot="footer" class="dialog-footer">
      <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // statusList:[{id:1,value:'正常'},{id:2,value:'异常'},{id:3,value:'中断'}],
  },
  data() {
    return {
      dialog: this.dialog,
      loading: false,
      alarmData: [],
      storeData: [],
      statusList: [{ id: 1, value: '正常', type: '' }, { id: 2, value: '异常', type: 'warning' }, { id: 3, value: '中断', type: 'danger' }],
      title: '',
      pageSize: 10,
      currentPage: 1,
      total: 0,
      searchValue: ''
    }
  },
  methods: {
    searchChange(v) {
      this.searchValue = v
      if (v) {
        var result = []
        for (var item in this.storeData) {
          var obj = this.storeData[item]
          if (obj.hostname.indexOf(v) >= 0) {
            result.push(obj)
          }
        }
        this.alarmData = result.slice(0, this.pageSize)
        this.total = result.length
        this.currentPage = 1
      } else {
        this.alarmData = this.storeData.slice(0, this.pageSize)
        this.total = this.storeData.length
        this.currentPage = 1
      }
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.handleCurrentChange(1)
    },
    handleCurrentChange(v) {
      if (this.searchValue) {
        var result = []
        for (var item in this.storeData) {
          var obj = this.storeData[item]
          if (obj.hostname.indexOf(this.searchValue) >= 0) {
            result.push(obj)
          }
        }
        this.alarmData = result.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      } else {
        this.alarmData = this.storeData.slice((v - 1) * this.pageSize, v * this.pageSize)
      }
    },
    closeHandle() {
      this.searchValue = ''
      this.$refs.searchInput.clear()
    },
    openHandle() {
      // this.$refs.elCard.$el.children[0].children[1].style.padding = "10px 10px";
      console.log('get', document.getElementsByClassName('el-dialog__body').length)
      console.log('get', document.getElementsByClassName('el-dialog__body'))
      console.log(this.$refs.elDialog)
    }
  }
}
</script>

<style lang="scss">
.theme1 {
   .el-dialog {
     .el-dialog__header{
      padding: 10px 10px;
     };
     .el-dialog__body {
      padding: 5px 5px;
     };
     .el-dialog__footer {
      padding: 5px 5px;
     };
  };
  .el-dialog {
     padding: 5px 10px;
  }
}

.theme2 {
  .el-card {
  }
  .el-card__body {
     padding-top: 5px;
     padding: 0px;
   }
  .el-card__header {
    padding: 2px 2px;
  }
}

.el-input__inner {
  height: 30px;
}

.el-tag {
  height: 30px;
}

.el-table--small th, .el-table--small td {
  padding: 2px 0px;
}

.el-table th > .cell {
   color:black;
   font-weight:bold;
}
.el-input__icon {
  height: 30px;
}
</style>
